<template>
	<div class="count-container">
		<div class="goods-list" v-for="item in list" :key="item.id">
			<!-- 商品项区域 -->
			<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<mt-switch  @change="changeStatus(item.id)"></mt-switch>
						    <img :src="item.url">
							<div class="info">
								<h3>{{item.title}}</h3>
								<p>
									<span class="price">￥{{item.sell_price}}</span>
									<shopnum :now_count="item.count" :goodid="item.id"></shopnum>
									<a href="#" @click.prevent="removeGoodsinfo(item.id)">删除</a>
								</p>
							</div>
						</div>
					</div>
			</div>
		</div>
		<!-- 结算区域 -->
		<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner mui-sum" >
						     <div class="left">
								 <p>总计(不含运费)</p>
								 <p>已勾选商品 <span class="red"> {{this.$store.state.countcount}}</span>件，
								 总价 <span class="red">￥{{this.$store.state.sumsum}}</span></p>
							 </div>
							 <mt-button type="danger">去结算</mt-button>
						</div>
					</div>
		</div>
		
	</div>
</template>

<script>
	import shopnum from '../subcomponents/shopcar_numbox.vue'
	export default{
		data(){
			return{
				list:this.$store.state.car, //存放购物车所有的商品详情
			}
		},
		created(){
			this.getallshoplist();
		},
		methods:{
			// 获取到所有的购物车商品详情
			getallshoplist(){
				this.axios.get('http://localhost:3000/api/getshopcarlist')
				.then(res => {
					if(res.data.status==0){
						var list=[];
						res.data.data.forEach( item => {
							// 加入到共享数据中
							// 构造一个加入购物车的商品对象,当加入的时候，默认选中商品
							var shop={id:item.id,url:item.url,title:item.title,
							count:item.count,sell_price:item.sell_price,selected:true};
							// 调用mutations中的方法修改state中的值
							list.push(shop)
						})
						this.$store.commit("initShopCar",list)
					}else{
						console.log('错误啦')
					}
				})
				console.log(this.list);
			},
			removeGoodsinfo(id){
				// 还要删除数据库中的数据
				this.axios.get('http://localhost:3000/api/deleteshopcarlist?id='+id)
				//刷新车里的商品
				this.$store.commit("removeGoodsinfo",id)
			},
			changeStatus(id){
				// vuex不推荐直接修改数据，要通过mutations修改数据
				this.$store.commit('updateStatus',id)
				// 每当改变一次状态就重新计算一次
				this.$store.commit('sumCount')
			},
			

		},
		components:{
			shopnum:shopnum
		},
	}
</script>

<style  lang="scss">
	.count-container{
		background-color: #eee;
		overflow: hidden;
		.goods-list{
			.mui-card-content-inner{
				display: flex;
				align-items: center;
				.mint-switch{
					margin-right:5px;
				}
			}
			img{
				width: 60px;
				height: 60px;
			}
			h3{
				font-size: 14px;
			}
			.info{
				margin-left:5px;
				p{
					display: flex;
				}
				.price{
					color: red;
					font-weight: bold;
					margin-right: 4px;
				}
				a{
					margin-left: 3px;
				}
			}
		}
	    .mui-sum{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.red{
				color: red;
				font-weight: bold;
				font-size: 16px;
			}
		}
	}
</style>
